<template>
  <v-layout title="公众号类别管理">
    <el-row type="flex" justify="center">
      <el-col :lg="14" :md="20" :sm="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        />
        <div class="subtitle bottom-line pdt15 bold">
          公众号自定义
        </div>
        <div v-for="(data,index) in advPositionData" class="bottom-line">

          <v-form
            :form-title="advPositionTitle"
            :form-data="data"
            label-width="120px"
          />
          <el-row type="flex" justify="end">
            <el-button size="mini" @click="removePosition(data,index)">移除</el-button>
            <el-button type="primary" size="mini" @click="modifyPosition(data,index)">确定修改</el-button>
          </el-row>
        </div>
        <el-row type="flex" justify="start" style="padding-left:120px">
          <el-button size="mini" @click="addPosition">新增</el-button>
        </el-row>

        <!--<div class="pdt15">-->
        <!--<v-form-->
        <!--:form-title="dateTitle"-->
        <!--:form-data="dateData"-->
        <!--label-width="120px"-->
        <!--&gt;-->
        <!--</v-form>-->
        <!--</div>-->

        <!--<el-row type="flex" justify="end">-->
          <!--<el-button type="primary" size="mini" @click="">撤销修改</el-button>-->
          <!--<el-button type="primary" size="mini" @click="">确定</el-button>-->
        <!--</el-row>-->
      </el-col>
    </el-row>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      formTitle: [
        {
          cn: 'id',
          en: 'id',
          disabled: true
        },
        {
          cn: '分组名称',
          en: 'name',
          disabled: true
        },
        {
          cn: '创建时间',
          en: 'created_at',
          disabled: true
        },
        {
          cn: '更新时间',
          en: 'updated_at',
          disabled: true
        }

      ],
      formData: {},

      advPositionTitle: [
        {
          cn: '标签中文名称',
          en: 'label_name'
        },
        {
          cn: '标签类型',
          en: 'label_type',
          type: 'select',
          tips: '标签类型为选择框时,请在标签选项值中输入数据,多个数据用回车隔开',
          list: [
            // {
            //   label: '数字输入框',
            //   value: '1'
            // },
            // {
            //   label: '文字输入框',
            //   value: '2'
            // },
            {
              label: '选择框',
              value: 'select'
            },
            // {
            //   label: '日期选择',
            //   value: '4'
            // }
          ]
        },
        {
          cn: '标签选项值',
          en: 'label_option',
          type: 'textarea'
        }
      ],
      advPositionData: [
        {
          label_name: '',
          label_type: '',
          label_options: ''
        }
      ]

    }
  },
  created() {
    this.id = this.$route.query.id
    const details = this.$route.params.details
    if (details) {
      localStorage.setItem('details', JSON.stringify(details))
      this.formData = this.$route.params.data
    }
    this.formData = localStorage.getItem('details') && JSON.parse(localStorage.getItem('details')) || {}
    this.getTencentGroupDetail()
  },
  methods: {
    // 获取公众号分组详情
    getTencentGroupDetail() {
      const data = { id: this.id }
      this.$get('action/WechatNumber/groupsById', data)
        .then(res => {
          this.advPositionData = res.data
        })
    },
    // 修改公众号自定义广告位置
    modifyPosition() {
      const data = this.advPositionData
      this.$post('action/GroupLabels/tree', data)
        .then(res => {
          localStorage.setItem('details', JSON.stringify(data))
        })
    },

    removePosition(data, index) {
      this.$confirm('是否删除该条信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(data)
        return
        const datas = { id: data.id }
        this.$post('action/WechatNumber/delplaces', datas)
          .then(res => {
            this.getTencentGroupDetail()
          })
      }).catch(() => {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addPosition() {
      this.advPositionData.push({
        label_name: '',
        label_type: '',
        label_options: ''
      })
    },
    reset() {

    },
    submit() {
      const data = this.formData
      this.modifyPlace()
      this.$post('action/WechatNumber/save', data)
        .then(res => {

        })
    }
  }
}
</script>

<style scoped>

</style>
